<ul class="nav nav-tabs">
	<li ng-class="{'active':pagedata.op=='list'}"><a href="javascript:;" ng-click="access()">页面列表</a></li>
	<li class="active"><a href="javascript:;" ng-click="access()">设计</a></li>
</ul>
<div id="editform" class="form-horizontal form">
<style>
.table td span{display:inline-block;margin-top:4px;}
.table td input{margin-bottom:0;}
</style>
<script language="javascript">require(['underscore']);</script>
<script type="text/javascript" src="../core/resource/js/hhSwipe.js"></script>
<script type="text/javascript" src="../core/resource/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../core/resource/components/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../core/resource/components/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="../core/resource/components/ueditor/ueditor.parse.js"></script>
<script type="text/javascript" src="../core/resource/components/ueditor/lang/zh-cn/zh-cn.js"></script>
<link href="../core/resource/css/diy.css?v=3" rel="stylesheet">
<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
        <div class="fe">
            <div class="fe-phone">
                <div class="fe-phone-left"></div>
                <div class="fe-phone-center">
                    <div class="fe-phone-top"></div>
                    <div class="fe-phone-main">
						<div id="editor" >
							<div class="fe-mod fe-mod-11 fe-mod-nohover">
								<div class="fe-mod-11-title" ng-click="pagedata.edithtml=pagedata.settinghtml;pagedata.editdata=pagedata.item.setting">{{pagedata.item.title || '默认标题'}}</div>
							</div>
							<div style="height: 50px;" ng-show="pagedata.item.setting.guide==1"></div>
							<div ng-repeat="inav in pagedata.item.items" class="fe-mod-repeat" ng-class="{'chose':pagedata.index==$index}">
                                <div ng-include="tomedia(inav.showhtml)" class="fe-mod-parent" ng-click="pagedata.edit=2;pagedata.edithtml=inav.edithtml;pagedata.editdata=inav.params;pagedata.index=$index;"></div>
                                <div class="fe-mod-del" ng-show="pagedata.index==$index" ng-click="pagedata.item.items.splice($index,1)">移除</div>
                            </div>
                            <!-- 浮动按钮 -->
                            <div class="fe-floatico" ng-show="pagedata.item.setting.fudong==1" ng-style="{'width':pagedata.item.setting.fstyle.width,'top':pagedata.item.setting.fstyle.top}" ng-class="{'fe-floatico-right':pagedata.item.setting.fstyle.style=='right'}">
                                <img ng-src="{{pagedata.item.setting.fstyle.img || '../core/resource/images/init-data/init-image-7.png'}}" style="height:100%; width: 100%;"/>
                            </div>
                            <!-- 关注按钮 -->
                            <div class="fe-guide" ng-show="pagedata.item.setting.guide==1" ng-style="{'display':'block','background-color':pagedata.item.setting.gstyle.bgcolor,'top':'60px','z-index':'890','opacity':pagedata.item.setting.gstyle.opacity}">
                                <div class="fe-guide-faceimg"><img ng-src="../core/resource/images/init-data/init-icon.png" ng-style="{'border-radius':pagedata.item.setting.gstyle.facestyle}" /></div>
                                <div class="fe-guide-sub" ng-style="{'color':pagedata.item.setting.gstyle.navcolor,'background-color':pagedata.item.setting.gstyle.navbgcolor}">{{pagedata.item.setting.gstyle.sub ||'立即关注'}}</div>
                                <div class="fe-guide-text"  ng-style="{'font-size':pagedata.item.setting.gstyle.size,'color':pagedata.item.setting.gstyle.color}">
                                    <p ng-class="{'fe-guide-lineheight':pagedata.item.setting.gstyle.title2==''}">{{pagedata.item.setting.gstyle.title1s || '加关注，做代理。'}}</p>
                                    <p ng-class="{'fe-guide-lineheight':pagedata.item.setting.gstyle.title1==''}">{{pagedata.item.setting.gstyle.title2s || '关注公众号，享专属服务'}}</p>
                                </div>
                            </div>
						</div>
                    </div>
                    <div class="fe-phone-bottom"></div>
                </div>
                <div class="fe-phone-right"></div>
            </div>
            <div class="fe-panel">
				<div class="form-group">
					<div class="btn-group diy-tp-group">
						<a  ng-class="{'active':pagedata.edit==1}" ng-click="pagedata.edit=1" class="btn">添加组件</a>
						<a  ng-class="{'active':pagedata.edit==2}" class="btn">编辑组件</a>
						<a  ng-class="{'active':pagedata.edit==3}" ng-click="pagedata.edit=3;pagedata.edithtml='../core/resource/main.html';pagedata.editdata=pagedata.item.setting" class="btn active">基础设置</a>
					</div>
				</div>
				<div class="diy-editor" ng-show="pagedata.edit==1">
						<div class="form-group diy-zujian">
							<div class="keyword-list-head">
								<div class="keyword-list-head clearfix">
									<div class="input-group jinyun-margin-bottom" style="width:465px;">
										<input class="form-control" type="text"  name="title" id="title" value="" placeholder="输入组件关键字" style="width: 430px;">
										<span class="input-group-btn"><button id="submit" ng-click="getnav()" class="btn btn-default"><i class="fa fa-search"></i></button></span>
									</div>
								</div>
							</div>
						    <ul>
								<li ng-show="nav.title" ng-repeat="nav in pagedata.templates" ng-click="func.add(nav)" class="btn btn-default" style="float: left;"> {{nav.title}}</li>
							</ul>
						</div>
					</div>

					<div class="form-group" ng-show="pagedata.edit==2 || pagedata.edit==3">
						<div style="min-height:350px" class="diy-editor" ng-include="tomedia(pagedata.edithtml)" onload="func.start()"></div>
				    </div>
            </div>
        </div>
        <!-- 页面底部保存栏 -->
        <div class="fe-save">
            <div class="fe-save-main">
                <div class="fe-save-info">
                </div>
                <div class="fe-save-submit save-submit" ng-click="post(pagedata.item,'design')">保存</div>
                <div class="fe-back" onclick="history.back()">返回列表</div>
            </div>
            <div class="fe-save-fold" onclick="fold()"></div>
            <div class="fe-save-gotop" onclick="$(document.body).animate({scrollTop:0},500)"><i class="fa fa-angle-up"></i><br>返回顶部</div>
        </div>
</div>

<div id="floating-data"  class="modal fade" tabindex="-1" style="z-index:99999;display:none">
    <div class="modal-dialog" style='width: 920px;'>
        <div class="modal-content" ng-if="pagedata.item.type==2">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择数据</h3></div>
					<div class="mylink-con">
						<div class="page-header">
                            <h4><i class="fa fa-folder-open-o"></i>主表字段</h4>
                        </div>
						<div ng-repeat="v in pagedata.fields" ng-click="getdata('data:main.'+v.id)" class="btn btn-default mylink-nav" >{{v.title}}</div>
					</div>
					<div class="mylink-con" ng-if="pagedata.father">
						<div class="page-header">
                            <h4><i class="fa fa-folder-open-o"></i>父表字段</h4>
                        </div>
						<div ng-repeat="v in pagedata.father" ng-click="getdata('data:father.'+v.id)" class="btn btn-default mylink-nav" >{{v.title}}</div>
					</div>
					<div class="mylink-con" ng-repeat="fu in pagedata.data.more" ng-if="pagedata.more" >
						<div class="page-header">
                            <h4><i class="fa fa-folder-open-o"></i>附表{{fu.title}}字段</h4>
                        </div>
						<div ng-repeat="v in fu.fields" ng-click="getdata('data:'+fu.id+'.'+v.id)" class="btn btn-default mylink-nav" >{{v.title}}</div>
					</div>
					<div class="mylink-con" ng-if="pagedata.suns" >
						<div class="page-header">
                            <h4><i class="fa fa-folder-open-o"></i>选择子表数据</h4>
                        </div>
						<div ng-repeat="su in pagedata.suns" ng-click="getdata('data:'+su.id)" class="btn btn-default mylink-nav" >{{su.title}}</div>
					</div>
            <div class="modal-footer"><a href="#" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a></div>
        </div>
        <div class="modal-content" ng-if="pagedata.item.type==1">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择数据</h3></div>
					<div class="mylink-con" ng-if="pagedata.tables" >
						<div class="page-header">
                            <h4><i class="fa fa-folder-open-o"></i>选择数据</h4>
                        </div>
						<div ng-repeat="table in pagedata.tables" ng-click="getdata('data:'+table.id)" class="btn btn-default mylink-nav" >{{table.title}}</div>
					</div>
            <div class="modal-footer"><a href="#" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a></div>
        </div>
    </div>
</div>
<div id="sun-data"  class="modal fade" tabindex="-1" style="z-index:99999;display:none">
    <div class="modal-dialog" style='width: 920px;'>
        <div class="modal-content">
            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择数据</h3></div>
					<div class="mylink-con">
						<div class="page-header">
                            <h4><i class="fa fa-folder-open-o"></i>选择字段</h4>
                        </div>
						<div ng-if="pagedata.item.type==2" ng-repeat="v in pagedata.suns[pagedata.sun_id].fields" ng-click="getdata('data:'+pagedata.sun_id+'.'+v.id,1)" class="btn btn-default mylink-nav" >{{v.title}}</div>
						<div ng-if="pagedata.item.type==1" ng-repeat="v in pagedata.tables[pagedata.sun_id].fields" ng-click="getdata('data:'+pagedata.sun_id+'.'+v.id,1)" class="btn btn-default mylink-nav" >{{v.title}}</div>
					</div>
            <div class="modal-footer"><a href="#" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a></div>
        </div>
    </div>
</div>
<script>
	function fold(){
        width= $(".fe-save").width();
        left = $(".fe-save").css("left");
        left = left.replace("px","");
        if(left>=0){
            $(".fe-save").animate({left:0-width+40+"px"},1000);
            $(".fe-save-fold").addClass("fe-save-fold2");
        }else{
            $(".fe-save").animate({left:"0px"},1000);
            $(".fe-save-fold").removeClass("fe-save-fold2");
        }
    }
	window.scope.getnav=function(){
		var key=$('#title').val();
		if(key){
			window.scope.post({},'getnav','title='+key,function(result){
				window.scope.pagedata.templates=result;
				window.scope.$apply();
			});
		}else{
			window.scope.post({},'getnav','',function(result){
				window.scope.pagedata.templates=result;
				window.scope.$apply();
			});
		}
		
	}
	window.scope.lunbo=function(){
		$('.fe-mod-2 .swipe').each(function(){
                        initswipe($(this));
        })
        $('.fe-mod-8-main-img img').each(function(){
            $(this).height($(this).width());    
        });
        $('.fe-mod-12 img').each(function(){
            $(this).height($(this).width());    
        });
	}
	//设置数据
	window.scope.choosedata=function(to,field){
		window.scope.pagedata.currentmodel=to;
		window.scope.pagedata.currentfield=field;
		$('#floating-data').modal();
	}
	//读取数据
	window.scope.getdata=function(data,is_sun){
		window.scope.pagedata.currentmodel[window.scope.pagedata.currentfield]=data;
		if(is_sun){
			$('#sun-data .close').click();
		}else{
			$('#floating-data .close').click();
		}
		
	}
	//读取设置子表字段
	window.scope.choose_sun_data=function(to,field,f){
		window.scope.pagedata.currentmodel=to;
		window.scope.pagedata.currentfield=field;
		if(!f){
			alert('该页面组件存在问题，请联系管理页！');
			return false;
		}
		//var temp=f.split('.');
		window.scope.pagedata.sun_id=f.slice(5);
		$('#sun-data').modal();
	}
	window.scope.func.start=function(){
		//初始化slider
		$('.slider').each(function(){
			var min=$(this).attr('data-min');
			var max=$(this).attr('data-max');
			var model=$(this).attr('data-model');
			var def=$(this).attr('data-default');
			var step=$(this).attr('data-step');
			if(!min){
				min=0;
			}
			if(!def){
				def=min;
			}
			if(!model){
				return false;
			}
			if(!step){
				step=1;
			}
			$(this).slider({
				slide:function(event,ui){
						eval('window.scope.'+model+'='+ui.value+';');
						window.scope.$apply();
					},
				value:def,
				min:min,
				max:max,
				step:step
			});
		});
	}
</script>
